<template>
	<view class="user-content">
		<view class="custom-navigation">
			<image src="../../static/images/user/back_white.png" class="back-img" @click="goBack"></image>
			<view>小春运动</view>
			<view class="back-img"></view>
		</view>
		<view class="user-box">
			<view class="wallet-box">
				<view class="money">
					<view class="tit">账户余额(元)</view>
					<view class="num">{{ userInfo.money ||'0.00'}}</view>
				</view>
				<view class="money">
					<view class="tit">赠送余额(元)</view>
					<view class="num">{{ userInfo.gifts_money ||'0.00'}}</view>
				</view>
				<view class="charge" @click="goTocharge">
					余额明细
					<image src="../../static/images/user/icon_arrow_white.png" mode="" class="image"></image>
				</view>
			</view>
			<view class="slog-list">
				<view class="slog-list-item">
					<image src="../../static/images/home/icon-jine.png" class="image"></image>
					<text class="text">多充多送</text>
				</view>
				<view class="slog-list-item">
					<image src="../../static/images/home/icon-money.png" class="image"></image>
					<text class="text">消费抵用</text>
				</view>
				<view class="slog-list-item">
					<image src="../../static/images/home/icon-store.png" class="image"></image>
					<text class="text">全国门店均可用</text>
				</view>
			</view>
		</view>
		<view class="select-box">
			<view class="tit">选择充值服务</view>
			<view class="charge-list">
				<view class="charge-list-item" v-for="i in rechargeConfig" :key="i.id"
					:class="id === i.id ? 'active' : ''" @click="chooseRech(i)">
					<view class="new" v-if="i.is_first === 1">
						<image src="../../static/images/home/icon-hot.png" class="image"></image>
						<text class="text">首冲特惠</text>
					</view>
					<view class="t0">{{ i.money }}</view>
					<view class="t1">{{ i.memo }}</view>
				</view>
			</view>

			<view class="remark" v-if="selectRech">
				注：充{{selectRech.money}}元赠{{selectRech.gifts_money}}元，实际{{selectRech.memo}}元</view>

		</view>
		<view class="btn-box">
			<view class="agree-text">
				<image class="image" src="../../static/images/home/checked.png" v-if="isAgree"
					@click="this.isAgree = false">
				</image>
				<image class="image" src="../../static/images/home/unchecked.png" v-if="!isAgree"
					@click="this.isAgree = true">
				</image>
				<view class="agree-tit">
					我已阅读并同意
					<text @click="this.isshowAgree = true" class="text">《小春运动充值协议》</text>
				</view>
			</view>
			<button class="btn" @click="limitUse">立即充值{{ money }}元</button>
		</view>
		<view class="kefu-img" @click="clickTel"><text class="text">联系客服</text></view>
		<view class="agree-dialog" v-if="isshowAgree">
			<view class="agree-box">
				<view class="t0">
					《小春运动充值协议》
					<view class="close" @click="this.isshowAgree = false">
						<image src="../../static/images/home/close.png" class="image"></image>
					</view>
				</view>
				<view class="content">
					<view class="t1">
						一、协议内容
						<br />
						用户在小春运动平台上参与充值活动，即可获得相应比例的余额，并体现在该用户的小春运动账户上(目前充值金额:余额=1:1)。若有进行充返活动，将额外获得对应返还比例的余额或者其他物品(具体以活动规则为准)。
						<br />
						温馨提示:
						<br />
						充值活动得到的余额仅限在小春运动进行消费(请用微信直接扫码付费使用)，不支持购买卡券等活动产品，建议您根据实际需求进行充值。
						<br />
						二、充值余额有效期
						<br />
						充值所获得的账户余额有效期为自充值日起至用完即止。
						<br />
						三、充值余额使用规则
						<br />
						充值余额仅可用于支付本人在小春运动订单中的费用，不支持购买卡券等活动产品，不可提现、转赠退款。
						<br />
						四、特别声明
						<br />
						1.凡通过活动获取的余额与卡、券仅限与账户绑定的微信或支付宝用户使用。不能提供给第三方机构或个人使用、亦不能代他人扫码使用。
						2.充返活动福利仅提供给正当、合法使用小春运动客户的充值费用。
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api/index.js';
	import store from '@/store/index.js';
	import {
		mapMutations,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				isAgree: false,
				isshowAgree: false,
				rechargeConfig: [],
				selectRech: null,
				selectIndex: 0,
				id: null,
				money: null,
				userinfo: null,
			}
		},
		onLoad(options) {
			if (options && options.index) {
				this.selectIndex = options.index
			}
			this.getUserInfo()
			this.getRechargeConfig();
		},
		methods: {
			getUserInfo() {
				api.getUserInfo().then(res => {
					this.userinfo = res.data.userinfo
				});
			},
			goBack() {
				uni.navigateBack();
			},
			getRechargeConfig() {
				api.rechargeConfig().then(res => {
					this.rechargeConfig = res.data;
					this.selectRech = this.rechargeConfig[this.selectIndex]
					this.id = this.rechargeConfig[this.selectIndex].id
					this.money = this.rechargeConfig[this.selectIndex].money
				});
			},
			chooseRech(rech) {
				this.selectRech = rech
				this.money = rech.money;
				this.id = rech.id;
			},
			limitUse() {
				if (!this.isAgree) {
					return uni.showToast({
						icon: "none",
						title: '请先阅读 《小春运动充值协议》, 并同意后继续支付!'
					});
				}
				let that = this
				api.submit({
					id: this.id
				}).then(res => {
					if (res.code) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: function(payres) {
								uni.showToast({
									icon: "none",
									title: "支付成功"
								})
								setTimeout(() => {
									that.getUserInfo()
								}, 1000)
							},
						});
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg
						})
					}
				});
			},
			goTocharge() {
				uni.navigateTo({
					url: '/pages/user/balanceList' // 跳转到对应路径的页面
				});
			},
			clickTel() {
				// window.location.href = 'tel:400-989-8988';
				api.sysConfig({
					site: 'sys_kefu'
				}).then(res => {
					uni.makePhoneCall({
						phoneNumber: res.data
					})
				})
			}
		}
	};
</script>

<style lang="scss">
	.user-content {
		background: url('https://oss.bigchun.com/img/home/header-bg.png') no-repeat;
		background-size: 100% 328rpx;
		padding: 88rpx 26rpx 100rpx;

		.custom-navigation {
			font-weight: 500;
			font-size: 34rpx;
			color: #ffffff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;

			.back-img {
				width: 18rpx;
				height: 36rpx;
				padding: 20rpx;
			}
		}
		.user-box{
			background: url('https://oss.bigchun.com/img/user/block_bg.png') no-repeat;
			background-size: 100% 100%;
			margin: 0 -10rpx;
			padding: 50rpx 40rpx 0rpx 40rpx;
			height: 280rpx;
			.wallet-box {
				display: flex;
				.money {
					flex: 1;
					.tit {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
					}
					.num {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 60rpx;
						color: #49a1fd;
						line-height: 96rpx;
						text-align: left;
						font-style: normal;
					}
				}
				.charge {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 160rpx;
					height: 48rpx;
					background: #49a1fd;
					border-radius: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #ffffff;
					line-height: 40rpx;
					text-align: center;
					font-style: normal;
				
					.image {
						width: 14rpx;
						height: 24rpx;
						margin-left: 12rpx;
					}
				}
			}
			
			
			.slog-list {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
			
				.slog-list-item {
					display: flex;
					align-items: center;
			
					.image {
						width: 38rpx;
						height: 38rpx;
						margin-right: 4rpx;
					}
			
					.text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
						line-height: 40rpx;
						text-align: left;
			
					}
				}
			}
		}

		.select-box {
			background: #ffffff;
			border-radius: 28rpx;
			padding: 26rpx;

			.tit {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				line-height: 44rpx;
				text-align: left;

				position: relative;
				padding-left: 20rpx;

				&::before {
					position: absolute;
					content: '';
					width: 10rpx;
					height: 30rpx;
					background: #49a1fd;
					border-radius: 6rpx;
					left: 0;
					top: 6rpx;
				}
			}

			.charge-list {
				display: flex;
				flex-wrap: wrap;
				margin-top: 16rpx;

				.charge-list-item {
					background: #f7f7f7;
					border-radius: 16rpx;
					width: 48%;
					border-radius: 28rpx;
					padding: 26rpx 0;
					position: relative;
					text-align: center;
					margin-right: 2%;
					margin-bottom: 20rpx;

					&:nth-child(2n) {
						margin-right: 0;
					}

					&.active {
						background: #f8fcff;
						box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(102, 226, 244, 0.19);
						border-radius: 8rpx;
						border: 2rpx solid #49a1fd;

						.t0 {
							color: #49a1fd !important;
						}

						.t1 {
							color: #49a1fd !important;
						}
					}

					.new {
						position: absolute;
						left: 0;
						top: 0;
						background: #49a1fd;
						border-radius: 16rpx 0rpx 22rpx 0rpx;
						width: 148rpx;
						height: 34rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.image {
							width: 26rpx;
							height: 26rpx;
						}

						.text {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #ffffff;
							line-height: 34rpx;
							text-align: left;

						}
					}

					.t0 {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 40rpx;
						color: #000000;
						line-height: 56rpx;

					}

					.t1 {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #737373;
						line-height: 40rpx;

					}
				}
			}

			.remark {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #49a1fd;
				line-height: 40rpx;
				text-align: left;

			}
		}

		.btn-box {
			.btn {
				width: 436rpx;
				height: 88rpx;
				background: linear-gradient(311deg, #93a4fb 0%, #2f9afe 100%);
				box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(20, 135, 255, 0.4);
				border-radius: 44rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 34rpx;
				color: #ffffff;
				line-height: 88rpx;
				text-align: center;

			}

			.agree-text {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 60rpx auto 20rpx;

				.image {
					margin-right: 20rpx;
					width: 40rpx;
					height: 40rpx;
				}

				.agree-tit {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					line-height: 40rpx;
					text-align: right;

					.text {
						color: #49a1fd;
					}
				}
			}
		}

		.kefu-img {
			background: url('https://oss.bigchun.com/img/home/kefu-bg.png') no-repeat;
			background-size: 124rpx 124rpx;
			position: fixed;
			bottom: 20%;
			right: 12rpx;
			width: 124rpx;
			height: 124rpx;

			.text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #49a1fd;
				line-height: 28rpx;

				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
			}
		}

		.agree-dialog {
			background: rgba(0, 0, 0, 0.6);
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100%;
			overflow: scroll;

			.agree-box {
				background: url('https://oss.bigchun.com/img/home/agree-bg.png') no-repeat;
				background-size: 100% 100%;
				padding: 40rpx 30rpx;
				margin: 30% 40rpx;

				.t0 {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 34rpx;
					color: #000000;
					line-height: 48rpx;
					text-align: center;

					position: relative;

					.close {
						position: absolute;
						right: 0;
						top: 0;
						cursor: pointer;

						.image {
							width: 26rpx;
							height: 26rpx;
						}
					}
				}
			}

			.content {
				max-height: 60vh;
				overflow-y: scroll;

				.t1 {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #444444;
					line-height: 50rpx;
					text-align: left;

				}
			}
		}
	}
</style>